<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="font-weight:bold;">基本信息</h2>
      </div>
      <div class="formInline">
        <el-form ref="formInline" :model="formInline" class="demo-form-inline">
          <el-row>
            <el-col :span="9" :offset="1">
              <el-form-item label="消息名称">
                <span class="formContent">{{ formInline.name }}</span>
              </el-form-item>
              <el-form-item label="活动类型">
                <span class="formContent">{{
                  formInline.activityTypeName
                }}</span>
              </el-form-item>
              <el-form-item label="消息ID">
                <span style="margin-left:34px">{{ formInline.id }}</span>
              </el-form-item>
              <el-form-item label="发送状态">
                <span class="formContent">{{ formInline.sendStatusDesc }}</span>
              </el-form-item>
              <el-form-item label="发送用户">
                <span class="formContent">{{ formInline.sendUser }}</span>
                <el-button
                  v-if="formInline.sendUser === '导入顾问'"
                  style="margin-left:10px"
                  type="success"
                  @click="downloadData"
                >
                  下载Excel
                </el-button>
              </el-form-item>
              <el-form-item label="创建时间">
                <span class="formContent">{{ formInline.createdTime }}</span>
              </el-form-item>
              <el-form-item label="发送时间">
                <span class="formContent">{{ formInline.sendTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="1" :offset="2">
              <div style="font-size:14px;margin-top:9px">发送内容</div>
            </el-col>
            <el-col :span="11">
              <div class="search-box">
                <el-form-item label="标题">
                  <el-input v-model="message.title" readonly style="width:75%">
                  </el-input>
                </el-form-item>
                <el-form-item label="内容">
                  <el-input
                    type="textarea"
                    style="width:75%"
                    :rows="10"
                    v-model="message.content"
                    readonly
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="图片" v-if="formInline.backstageImage">
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="formInline.backstageImage"
                      :preview-src-list="srcList"
                    >
                    </el-image>
                  </div>
                </el-form-item>
                <el-form-item
                  label="附件"
                  v-if="formInline.annexes && formInline.annexes.length"
                >
                  <uploadFiles
                    style="margin-left:35px"
                    :files-list="formInline.annexes"
                    :isShow="false"
                  ></uploadFiles>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="sendData">
          <h2 style="font-weight:bold;">发送数据</h2>
        </div>
        <div class="downLoad">
          <el-button type="success" @click="downloadData('DETAIL')">
            下载数据明细
          </el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          prop="totalNum"
          label="发送数量"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="successNum"
          label="发送成功数量"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="readNum"
          label="查看数量"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="subsequentNum"
          label="下载数量"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { messageDetail, messagesDetailsNumber } from '@/api/notice'
import uploadFiles from '@common/uploadFiles'
export default {
  components: { uploadFiles },
  data() {
    return {
      formInline: {},
      tableData: [],
      message: {
        title: '',
        content: ''
      },
      srcList: []
    }
  },
  mounted() {
    let id = this.$route.query.id
    messageDetail(id, {}, (res) => {
      this.formInline = res
      this.message = res.messageChannels[0]
      this.srcList.push(res.backstageImage)
    })
    let params = { templateTypeEnum: 'OPERATION_TEMPLATE' }
    messagesDetailsNumber(id, params, (res) => {
      this.tableData = res
    })
  },
  methods: {
    //下载
    downloadData(val) {
      let taskId = this.$route.query.id
      this.$confirm('确定导出当前数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (val === 'DETAIL') {
            let url = `/messages/activity/${taskId}/data-details`
            this.msgDown('get', url, '', '数据明细表')
          } else {
            let url = `/messages/activity/${taskId}/export-consultant`
            this.msgDown('get', url, '', '顾问工号表')
          }
        })
        .catch(() => {
          this.$message.warning('取消下载')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item {
  margin-bottom: 0;
}
.clearfix {
  display: flex;
  .sendData {
    width: 300px;
  }
  .downLoad {
    flex: 1;
    text-align: right;
  }
}
:deep(.el-input__inner) {
  padding: 0 25px 0 15px !important;
}
.formContent {
  margin-left: 20px;
}
</style>
